// import { useLocation } from "react-router-dom";
import { useState, useEffect } from 'react' 
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
// import queryString from 'query-string'
import Header from '../../components/header/header'
import MapMaker from '../../components/mapMaker/mapMaker'
import CabinetList from '../../components/cabinetList/cabinetList'
import AlarmInformation from '../../components/alarmInformation/alarmInformation'
import SlidSeting from '../../components/slidSeting/slidSeting'
import BigVideo from '../../components/bigVideo/bigVideo'
import HisVideo from '../../components/hisVideo/hisVideo'

import { useReducer } from 'react'
import homeContext from '../../context/homeContext'
import {reducer, initReducer} from './reducer'
import {get} from '../../axios/index'

import './home.less'

function Home () {
  // let location = useLocation();
  const [facilityList, setFacilityList] = useState([])
  const onSign = (facility) => {
    let list = []
    facility.forEach(item => {
      let temp = Object.assign({}, item)
      temp.id = item.id
      temp.hot = true
      item.id = item.id + Math.random()
      list.push(item)
      list.push(temp)
    })
    setFacilityList(list)
  }

  useEffect(() => {
    get('/ck_electrical/api/listAllFacility').then(res => {
      if(res.data.status === '200') {
        let list = res.data.data
        if(list.length > 2) list.splice(2, list.length - 1)
        onSign(list)
      }
    })
  }, [])

  const [them, setThem] = useState(null)

  const [slidShow, setSlidShow] = useState(null)

  const [state, dispatch] = useReducer(reducer, {}, initReducer)
  return <homeContext.Provider value={{state, dispatch}}>
    <div className={`home ${them == 'blue' ? 'home-blue' : ''}`}>
      <Header them={them} setThem = { setThem } />
      <div className='content'>
        <div className='left'>
        {
          state.facility ? state.history ? <HisVideo facility={state.facility} dispatch={dispatch} /> : 
          <BigVideo facility={state.facility} dispatch={dispatch} />
          : <MapMaker onSign={onSign} />
        }
        </div>
        <div className='right'>
          <CabinetList className='list' list={facilityList} />
          <AlarmInformation className='warn-msg' />
          {
            !slidShow ? <LeftOutlined className='right-icon' onClick={() => setSlidShow(true)} /> :
            <RightOutlined className='right-icon' onClick={() => setSlidShow(false)} />
          }
          {
            slidShow !== null ? <SlidSeting show={slidShow} /> : ''
          }
        </div>
      </div>
    </div>
  </homeContext.Provider>
}

export default Home